<template>
    <el-dialog
        :title="isApply === 1? '确认匹配的交易流水信息':isApply === 2?'撤销匹配的交易流水信息':'查询匹配的交易流水信息'"
        :visible.sync="detailShow"
        :modal="false"
        fullscreen
        :before-close="handleClose"
    >
        <tableList
            ref="tableListPageRef"
            border
            heightMin="0"
            :keySet="keySet2"
            :tableData="list"
            :paginationShow="true"
            :total="pages.total"
            :pageNumber="pages.current"
            :pageSize="pages.size"
            @handleSizeChange="handlePageSizeChange"
            @handleCurrentChange="handlePageCurrentChange"
        ></tableList>
    </el-dialog>
</template>
<script>
import tableList from '@/components/tableList/index.vue'
import { queryFlowByItem } from '@/api/matchFlow.js'
import { queryFlowByItem as queryFlowByItemRevoke } from '@/api/matchFlowRevoke.js'
import { queryFlowByItem as queryFlowByItemSelect } from '@/api/matchFlowSelect.js'

export default {
    name: 'DifferenceDetailDialog',
    model: {
        prop: 'detailShow',
        event: 'change',
    },

    watch: {
        detailShow(newV) {
            if (newV) {
                this.getList()
            }
        },
    },
    props: {
        detailShow: {
            type: Boolean,
            default: false,
        },
        selectRow: {
            type: Object,
            default: ()=>{},
        },
                isApply: {
            type: Number,
            default: true,
        },
    },
    data() {
        return {
            pages: {
                current: 1,
                total: 0,
                size: 10,
            },
            list: [],
            keySet2: [
                {
                    label: '业务编号',
                    englishName: 'ywbh',
                },
                {
                    label: '交易日期',
                    englishName: 'jyrq',
                    width: 180,
                },
                {
                    label: '获票人名称',
                    englishName: 'kfhm',
                    width: 180,
                },
                {
                    label: '产品代码',
                    englishName: 'cpdm',
                    width: 180,
                },
                {
                    label: '产品名称',
                    englishName: 'cpmc',
                    width: 180,
                },
                {
                    label: '未开票金额',
                    englishName: 'wkpje',
                    width: 180,
                },
                {
                    label: '交易金额',
                    englishName: 'jyje',
                    width: 180,
                },
                {
                    label: '税率',
                    englishName: 'sysl',
                    width: 180,
                },
                {
                    label: '交易金额（不含税）',
                    englishName: 'jyje',
                              width: '180',
                },
              
            ],
        }
    },
    methods: {
        getList(){
            if(this.isApply === 1  || this.isApply === 2){
                if(!this.selectRow.iviid || !this.selectRow.matid){
                    return
                }
            }else if(this.isApply === 3){
                if(!this.selectRow.iviid || !this.selectRow.oidid){
                    return
                }
            }

            let obj = {
                iviid: this.selectRow.iviid,
                "pageNo": this.pages.current,
                "pageSize": this.pages.size
            }
            if(this.selectRow.matid){
                obj.matid = this.selectRow.matid;
            }else if(this.selectRow.oidid){
                obj.oidid = this.selectRow.oidid;
            }
            let axios = this.isApply === 1 ? queryFlowByItem: this.isApply === 2 ?queryFlowByItemRevoke : queryFlowByItemSelect;
            axios(obj).then(({ code, data }) => {
                if (code == 200) {
                    setTimeout(() => {
                        this.list = data.records.map((item) => {
                            return {
                                ...item,
                            }
                        })
                        this.pages.current = data.current
                        this.pages.size = data.size
                        this.pages.total = data.total
                    })
                }
            })
        },
        handleClose() {
            this.$emit('change', false)
        },

        handlePageSizeChange(val) {
            this.pages.current = 1
            this.pages.size = val
            this.getList()
        },
        handlePageCurrentChange(val) {
            this.pages.current = val
            this.getList()

        },
    },
    components: {
        tableList,
    },
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog_wrapper .dialog-fade-leave-active {
    animation-fill-mode: forwards;
}

::v-deep .el-dialog__body {
    padding: 10px 20px;
    max-height: 100% !important;
}
::v-deep .el-dialog {
    margin-top: 0px !important;
}

::v-deep .el-row {
    margin-bottom: 12px;
}
</style>

<style lang='scss'>
@media (max-height: 850px) and (min-height: 500px) {
    // .el-dialog{
    //     margin-top: 7vh !important;
    // }
    .el-dialog {
        margin-top: 4vh !important;
    }
    .el-dialog__body {
        max-height: 80vh !important;
    }
}
@media (max-height: 3600px) and (min-height: 850px) {
    .el-dialog {
        margin-top: 15vh !important;
    }
}
</style>